/**
 * Copyright 2016 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

#textContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background-color: rgba(0, 0, 0, 0.3);
	pointer-events: none;


	.utterance {

		width: 80%;
		min-width: 300px;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		&.shiftUp {
			top: 45%;
		}

		span {
			margin: 0 10px 0 10px;
			visibility: hidden;
			display: inline-block;
			font-size: 50px;
			line-height: 70px;

			&.visible {
				visibility: initial;
			}

			$labelMargin: 20px;

			&.label {


				display: block;
				margin: $labelMargin 0px $labelMargin 0px;

				$spanMargin : 3px;

				span {
					margin: $spanMargin $spanMargin $spanMargin;
					line-height: calc(70px - $spanMargin * 2);
					padding: 10px;
					background-color: black;
				}

				div.score {
					visibility: hidden;
					width: 100%;
					font-size: 18px;
					line-height: 26px;
					text-align: center;
					text-transform: uppercase;

					&.visible {
						visibility: initial;
					}
				}
			}
		}
	}
}